<script>
export default {
  data() {
    return {
      hotPost: [
        {
          "postId": "post3",
          "postUserId": null,
          "postState": 1,
          "postTitle": "在idea中没有找到local tomcat",
          "postReadCount": null,
          "postCommunity": null,
          "postCreateTime": null,
          "postUpdateTime": null,
          "postOperator": null,
          "whatPostContent": null,
          "commentCount": null,
          "postUserName": null,
          "whatTags": null
        },
        {
          "postId": "post1",
          "postUserId": null,
          "postState": 1,
          "postTitle": "第一个帖子的标题",
          "postReadCount": null,
          "postCommunity": null,
          "postCreateTime": null,
          "postUpdateTime": null,
          "postOperator": null,
          "whatPostContent": null,
          "commentCount": null,
          "postUserName": null,
          "whatTags": null
        }, {
          "postId": "post2",
          "postUserId": null,
          "postState": 0,
          "postTitle": "！！！帖子已封禁！！！",
          "postReadCount": null,
          "postCommunity": null,
          "postCreateTime": null,
          "postUpdateTime": null,
          "postOperator": null,
          "whatPostContent": null,
          "commentCount": null,
          "postUserName": null,
          "whatTags": null
        }, {
          "postId": "post7",
          "postUserId": null,
          "postState": 1,
          "postTitle": "英语四六级资源 百度网盘",
          "postReadCount": null,
          "postCommunity": null,
          "postCreateTime": null,
          "postUpdateTime": null,
          "postOperator": null,
          "whatPostContent": null,
          "commentCount": null,
          "postUserName": null,
          "whatTags": null
        }, {
          "postId": "post4",
          "postUserId": null,
          "postState": 1,
          "postTitle": "这段AOP链代码的执行顺序是什么",
          "postReadCount": null,
          "postCommunity": null,
          "postCreateTime": null,
          "postUpdateTime": null,
          "postOperator": null,
          "whatPostContent": null,
          "commentCount": null,
          "postUserName": null,
          "whatTags": null
        }, {
          "postId": "post11",
          "postUserId": null,
          "postState": 1,
          "postTitle": "一次恶心的面试经历",
          "postReadCount": null,
          "postCommunity": null,
          "postCreateTime": null,
          "postUpdateTime": null,
          "postOperator": null,
          "whatPostContent": null,
          "commentCount": null,
          "postUserName": null,
          "whatTags": null
        }, {
          "postId": "post6",
          "postUserId": null,
          "postState": 1,
          "postTitle": "chatGPT网站为什么无法访问",
          "postReadCount": null,
          "postCommunity": null,
          "postCreateTime": null,
          "postUpdateTime": null,
          "postOperator": null,
          "whatPostContent": null,
          "commentCount": null,
          "postUserName": null,
          "whatTags": null
        }, {
          "postId": "post5",
          "postUserId": null,
          "postState": 1,
          "postTitle": "使用object.defineProperty()方法监听属性变化",
          "postReadCount": null,
          "postCommunity": null,
          "postCreateTime": null,
          "postUpdateTime": null,
          "postOperator": null,
          "whatPostContent": null,
          "commentCount": null,
          "postUserName": null,
          "whatTags": null
        }, {
          "postId": "post10",
          "postUserId": null,
          "postState": 1,
          "postTitle": "白嫖ChatGPT4",
          "postReadCount": null,
          "postCommunity": null,
          "postCreateTime": null,
          "postUpdateTime": null,
          "postOperator": null,
          "whatPostContent": null,
          "commentCount": null,
          "postUserName": null,
          "whatTags": null
        }, {
          "postId": "post9",
          "postUserId": null,
          "postState": 1,
          "postTitle": "后端除了增删改查还有什么？",
          "postReadCount": null,
          "postCommunity": null,
          "postCreateTime": null,
          "postUpdateTime": null,
          "postOperator": null,
          "whatPostContent": null,
          "commentCount": null,
          "postUserName": null,
          "whatTags": null
        }]
    }
  },
  methods:{
    toPostInfo(postId){

      this.$router.push({
        path:'/postInfo',
        query:{
          postId:postId
        }
      })
    }
  }
}
</script>

<template>
  <ul>
    <li class="bar-item">
      <div id="hot-bar-title">热度最高</div>
      <div id="hot-bar-list">
        <a @click.prevent="toPostInfo(hotItem.postId)" v-for="hotItem in hotPost" :key="hotItem.postId">
          <div>{{hotItem.postTitle}}</div>
        </a>

      </div>
      <a href="https://www.baidu.com/"> <img src="../assets/images/baidu.jpg" alt="" id="baidu-img"></a>
    </li>
  </ul>
</template>

<style scoped>
#hot-bar-title {
  padding: 10px;
  color: red;
  font-weight: 900;
}

#hot-bar-list div{
  padding: 10px;
  border-top: 1px solid #e8e8e8;
  transition: 0.2s;
}

#hot-bar-list div:hover{
  background-color: #cecece;
  cursor: pointer;
}

#baidu-img{
  width: 300px;
}
.main-bar {
  width: 300px;

}

.main-bar ul {
  margin: 0;
}

.bar-item {
  /* background-color: red; */
  width: 300px;
  border: 1px solid lightgrey;
  border-radius: 5px;
  box-shadow: 0 0 5px 1px #e8e8e8;
  background-color: #fff;
  margin: 10px 0;
}

.bar-item:first-child {
  margin: 0;
}


</style>